<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="styles/style.css">
        <link rel="stylesheet" href="styles/theme/atom-one-dark.css">
        <title>小练习1-JS进阶（二）</title>
    </head>
    <body class="cols">
        <pre>
            <code>
                    // 小练习1：利用闭包修改下面的代码，让结果依次为1、2、3、4、5：

                    for (var i=1; i<=5; i++) {
                        setTimeout( function timer() {
                            console.log(i);
                        }, i*1000 );
                    }
            </code>
        </pre>
        <pre>
            <code>
                    // 解法：
                    // 方法1
                    for (var i = 1; i <= 5; i++) {
                        setTimeout(function timer(i) {
                            console.log(i)
                        }, i * 1000, i);
                    }
            </code>
        </pre>
        <pre>
            <code>
                    // 方法2
                    for (var i = 1; i <= 5; i++) {
                        (function(i) {
                            setTimeout(function timer() {
                                console.log(i)
                            }, i * 1000);
                        })(i)
                    }
            </code>
        </pre>
        <pre>
            <code>
                    // 方法3
                    for (var i = 1; i <= 5; i++) {
                        setTimeout(function timer(i) {
                            console.log(i)
                        }.bind(null, i), i * 1000);
                    }
            </code>
        </pre>
        <pre>
            <code>
                    // 方法4（这里let生成块级作用域，相当于创建了匿名的闭包）
                    for (let i = 1; i <= 5; i++) {
                        setTimeout(function timer() {
                            console.log(i)
                        }, i * 1000);
                    }
            </code>
        </pre>
        <script src="scripts/libs/highlight.pack.js"></script>
        <script src="scripts/p_1.js"></script>
        <script>
            hljs.initHighlightingOnLoad();
        </script>
    </body>
</html>